<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            margin: 50px auto;
            width: 490px;
            height: 170px;
            padding: 10px;
            border: 1px solid #000000;
        }

        .box>.inner {
            position: relative;
            height: 100%;
            overflow: hidden;
        }

        .box>.inner>ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 500%;
            height: 100%;
            list-style: none;
        }

        .box>.inner>ul>li {
            float: left;
        }

        .box>.inner>ul>li>img {
            vertical-align: top;
        }

        /* 左右按钮 */
        .box>.inner>span {
            display: none;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            background-color: rgba(0, 0, 0, .3);
            color: #fff;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
        }

        .box>.inner>span:hover {
            background-color: rgba(0, 0, 0, .5);
        }

        .box>.inner>span#left {
            left: 0;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
        }

        .box>.inner>span#right {
            right: 0;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
        }

        .box>ol {
            position: absolute;
            bottom: 15px;
            left: 50%;
            /* background-color: gold; */
            transform: translateX(-50%);
            list-style: none;
        }

        .box>ol>li {
            float: left;
            width: 20px;
            height: 20px;
            margin-left: 5px;
            background-color: #fff;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
        }

        .box>ol>li:nth-child(1) {
            margin-left: 0;
        }

        .box>ol>li.selected {
            background-color: orange;
        }
    </style>

    <script>
        window.onload = function () {

            function $(selecter) {
                return document.querySelector(selecter)
            }
            var olLis = document.querySelectorAll('ol>li')
            var ul = document.querySelector('ul')
            var box = document.querySelector('.box')
            // var leftBtn = document.querySelector('#left')
            // var rightBtn = document.querySelector('#right')
            var target = 0 //目标值
            var leader = 0 // 步长
            // 对ol下的li循环遍历，注册事件
            olLis.forEach((item, index) => {
                item.onmouseover = function () {
                    olLis.forEach(item => {
                        item.className = ''
                    })
                    this.className = 'selected'
                    // 计算目标值
                    target = -index * 490
                    // 控制 点击的次数  难点
                    clickNum = index
                }
            })


            setInterval(() => {
                leader = leader + (target - leader) / 10
                ul.style.left = leader + 'px'
            }, 30)


            // =============================================
            function show(selecter) {
                document.querySelector(selecter).style.display = 'block'
            }
            function hide(selecter) {
                document.querySelector(selecter).style.display = 'none'
            }
            box.onmouseover = function () {
                // leftBtn.style.display='block'
                // rightBtn.style.display='block'
                show('#left')
                show('#right')
            }
            box.onmouseout = function () {
                // leftBtn.style.display='none'
                // rightBtn.style.display='none'
                hide('#left')
                hide('#right')
            }
            // 声明一个计数器
            var clickNum = 0
            // 点击左侧按钮
            $('#left').onclick = function () {
                // 让ul动起来
                if (target > -4 * 490) {
                    clickNum++
                    target = -clickNum * 490
                }
                // 让指示器 添加样式
                olLis.forEach(item => {
                    item.className = ''
                })
                olLis[clickNum].className = 'selected'

            }
            // 右边按钮点击
            $('#right').onclick = function () {
                // 让ul动起来
                if (target < 0) {
                    clickNum--
                    target = -clickNum * 490
                }
                // 让指示器 添加样式
                olLis.forEach(item => {
                    item.className = ''
                })
                olLis[clickNum].className = 'selected'

            }



        }
    </script>
</head>

<body>
    <div class="box">
        <div class="inner">
            <ul>
                <li><img src="./imgs/01.jpg" alt=""></li>
                <li><img src="./imgs/02.jpg" alt=""></li>
                <li><img src="./imgs/03.jpg" alt=""></li>
                <li><img src="./imgs/04.jpg" alt=""></li>
                <li><img src="./imgs/05.jpg" alt=""></li>
            </ul>
            <!-- 左右按钮 -->
            <span id="left">&lt;</span>
            <span id="right">&gt;</span>
        </div>

        <ol>
            <li class="selected">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
</body>

</html>